<template>
  <el-card>
    <el-select v-model="listParam._id" clearable @change="cateChange">
      <el-option v-for="(item, index) in tableData" :key="index" :label="item.name" :value="item._id"></el-option>
    </el-select>
    <el-button type="primary" @click="addOne()">添加一级分类</el-button>
    <el-button type="primary" @click="addTwo()">添加二级分类</el-button>
    <el-table :data="tableData" stripe border style="margin-top: 20px">
      <el-table-column prop="name" label="分类名称">
      </el-table-column>
      <el-table-column prop="des" label="备注">
      </el-table-column>
      <el-table-column prop="_add_time_str" label="添加时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    <el-dialog :visible.sync="visible" destroy-on-close :title="editParam._id?'编辑分类':'添加分类'"
      :close-on-click-modal="false">
      <el-form :model="editParam" label-width="130px">
        <el-form-item v-if="type==2" label="选择分类">
          <el-select v-model="editParam.pid" clearable @change="cateChange">
            <el-option v-for="(item, index) in tableData" :key="index" :label="item.name" :value="item._id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称">
          <el-input v-model="editParam.name"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editParam.des"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<script>
  export default {
    data() {
      return {
        listParam: {
          _id: null,
          pageNum: 1,
          pageSize: 100,
        },
        type: 1,
        total: 0,
        visible:false,
        currentPage: 1,
        tableData: [],
        editParam: {
          pid: null,
          name: '',
          des: ''
        }
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      cateChange() {
        this.pageNum = 1
        this.getList()
      },
      addOne() {
        this.type = 1
        this.editParam = {
          pid: null,
          name: '',
          des: ''
        }
        this.visible = true
      },
      addTwo() {
        this.type = 2
        this.editParam = {
          pid: null,
          name: '',
          des: ''
        }
        this.visible = true
      },
      handleDelete(index, row) {
        vk.confirm('确定要删除该关系吗', '提示', '确定', '取消', res => {
          if (res.confirm) {
            this.orderDelete(row)
          }
        });
      },
      dialogSubmit() {
        // 添加或者更新
        vk.callFunction({
          url: 'user/kh/catePost',
          title: '加载中...',
          data: {
            type: this.type,
            ...this.editParam
          },
          success: (res) => {
            if (res) {
              this.getList()
              this.visible = false
            }
          }
        })
      },
      handleEdit(index, row) {
        this.editParam = Object.assign({}, row)
        this.visible = true
      },
      orderDelete(row) {
        vk.callFunction({
          url: 'user/kh/cateDelete',
          title: '加载中...',
          data: {
            _id: row._id
          },
          success: (res) => {
            if (res) {
              this.getList()
            }
          }
        })
      },
      handleSizeChange(val) {
        this.listPram.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listPram.pageNum = val
        this.getList()
      },
      getList() {
        vk.callFunction({
          url: 'user/kh/cateList',
          title: '加载中...',
          data: this.listParam,
          success: (res) => {
            if (res) {
              this.tableData = res.rows
              this.total = res.total
            }
          }
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/.el-tabs__new-tab {
    margin-right: 12px !important
  }

  .width400 {
    width: 400px
  }

  .width200 {
    width: 200px
  }

  .width100 {
    width: 100px
  }

  .good {
    display: flex;
    align-items: center;
    margin-top: 10px;

    &-img {
      width: 30px;
      height: 30px;
      border-radius: 4px;
    }

    &-name {
      margin-left: 10px;
    }

    &-price {
      color: #f56c6c;
      font-weight: 500;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
</style>